<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<script>
   (function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
//                    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根据你设置的html的font-size属性值做适当的变化
            docEl.style.fontSize = clientWidth+ 'px';
        };
 recalc();
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);

})(document, window);
      
</script>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	html,body{
		height: 100%;
	}
	body{
		font-size:20px;
	}
	.loginRegistration{
		perspective: 800px;
		height: 100%;
	}
	#lrContent{
		width: 1rem;
		height: 100%;
		position: relative;
        transform-style: preserve-3d;  
        transition:0.5s;
	}
	#lrContent .login,#lrContent .registration{
		position: absolute;
        width: 100%;
        height: 100%;	
	}
	
	#registration{
            left:-1rem;
            -webkit-transform:translateZ(0rem) rotateY(90deg) ;
            -moz-transform:translateZ(0rem) rotateY(90deg) ;
            -ms-transform:translateZ(0rem) rotateY(90deg) ;
            transform:translateZ(0rem) rotateY(90deg) ;
            -webkit-transform-origin:right ;
            -moz-transform-origin:right ;
            -ms-transform-origin:right ;
            transform-origin: right;
           /* background-color: #ff6700;*/
            background-color: rgba(0,0,0,0.4);
            background-size:100% 100%;
        }
        
        
    #login{
            z-index:2;
            -webkit-transform:translateZ(0rem) ;
            -moz-transform:translateZ(0rem);
            -ms-transform:translateZ(0rem) ;
            transform:translateZ(0rem);
            /*background-color: #b6abff;*/
            background-color: rgba(0,0,0,0.4);
            background-size:100% 100%;
            }
</style>
<body>
<div class="loginRegistration">
    <div class="lrContent" id="lrContent">
        <div class="login" id="login">
        	<div>登录</div>	
        </div>
        <div class="registration" id="registration">注册</div>
    </div>
</div>
</body>
<script>
	  var login=document.getElementById("login");
     var registration=document.getElementById("registration");
     var lrContent=document.getElementById("lrContent");
     login.onclick=function () {
         lrContent.style.cssText="transform: translateZ(-0.5rem) rotateY(90deg);-webkit-transform: translateZ(-0.5rem) rotateY(90deg);-moz-transform: translateZ(-0.5rem) rotateY(90deg);-ms-transform: translateZ(-0.5rem) rotateY(90deg);"
     }
     registration.onclick=function () {
         oContainer.style.cssText="transform: translateZ(-75px) rotateY(0deg)"
     }
</script>

</html>